<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
const num = ref(0)
const food = ref('花菜炒蛋')

const person = reactive({
  name: 'jack',
  food: {
    name: '花椰菜炒蛋',
    color: '又黄又绿'
  },
  cat: {
    name: '狗娃子'
  }
})

// 监听一个数据改变
watch(num, () => {
  console.log('num-改变啦')
})

// 监听多个数据改变
watch([num, food], () => {
  console.log('num,或者 food-改变啦')
})

// 监听 指定的属性
// watch(
//   () => person.food.name,
//   () => {
//     console.log('吃的东西修改了~~')
//   }
// )

// 深度监听
watch(
  person,
  () => {
    console.log('jack 变了')
  },
  {
    // 嵌套属性的修改，是否要监测到
    // 默认 true
    // 设置为 false 之后不监听
    // deep: true

    // 立刻执行，不设置，数据修改之后才会执行
    immediate: true
  }
)
</script>

<template>
  <h2 @click="num++">num:{{ num }}</h2>
  <h2 @click="food += '!!'">food:{{ food }}</h2>
  <h3>person:{{ person }}</h3>
  <button @click="person.cat.name = 'dog'">修改猫</button>
  <button @click="person.food.name = '隆江猪脚饭'">修改菜</button>
</template>

<style></style>